import { GetProp } from "antd";
import { Bubble, Prompts } from "@/components";
import {
  CommentOutlined,
  FireOutlined,
  HeartOutlined,
  ReadOutlined,
  SmileOutlined,
  UserOutlined,
} from "@ant-design/icons";
import React from "react";

const renderTitle = (icon: React.ReactElement, title: string) => (
  <div style={{ display: "flex", alignItems: "start", gap: 8 }}>
    {icon}
    <span>{title}</span>
  </div>
);

export const defaultConversationsItems = [
  {
    key: "0",
    label: "What is Ant Design X?",
  },
];

export const placeholderPromptsItems: GetProp<typeof Prompts, "items"> = [
  {
    key: "1",
    label: renderTitle(
      <FireOutlined style={{ color: "#FF4D4F" }} />,
      "Hot Topics"
    ),
    description: "What are you interested in?",
    children: [
      {
        key: "1-1",
        description: `What's new in X?`,
      },
      {
        key: "1-2",
        description: `What's AGI?`,
      },
      {
        key: "1-3",
        description: `Where is the doc?`,
      },
    ],
  },
  {
    key: "2",
    label: renderTitle(
      <ReadOutlined style={{ color: "#1890FF" }} />,
      "Design Guide"
    ),
    description: "How to design a good product?",
    children: [
      {
        key: "2-1",
        icon: <HeartOutlined />,
        description: `Know the well`,
      },
      {
        key: "2-2",
        icon: <SmileOutlined />,
        description: `Set the AI role`,
      },
      {
        key: "2-3",
        icon: <CommentOutlined />,
        description: `Express the feeling`,
      },
    ],
  },
];

export const senderPromptsItems: GetProp<typeof Prompts, "items"> = [
  {
    key: "1",
    description: "Hot Topics",
    icon: <FireOutlined style={{ color: "#FF4D4F" }} />,
  },
  {
    key: "2",
    description: "Design Guide",
    icon: <ReadOutlined style={{ color: "#1890FF" }} />,
  },
];

export const chatRoles: GetProp<typeof Bubble.List, "roles"> = {
  ASSISTANT: {
    placement: "start",
    variant: "borderless",
    typing: { step: 5, interval: 20 },
    // avatar: { icon: <UserOutlined />, style: { background: '#fde3cf' } },
    styles: {
      content: {
        borderRadius: 16,
      },
    },
  },
  USER: {
    placement: "end",
    // variant: "shadow",
    variant: "filled",
    // avatar: { icon: <UserOutlined />, style: { background: '#87d068' } },
    styles: {
      content: {
        borderRadius: 16,
      },
    },
  },
};
